<template>
    <div v-if="editStatus" class="m-edit-modal">
        <div class="header">
            {{title}}
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="m-content">

            <Form ref="myData" :model="editData" :rules="ruleValidate" :label-width="100" style="width: 900px"
                  :inline="true">
                <FormItem label="标题:" prop="infoTitle">
                    <Input type="text" placeholder="请输入..." v-model="myData.infoTitle" style="width: 800px"/>
                </FormItem>
                <Row>
                    <Col span="12">
                    <FormItem label="来源" prop="info_source">
                        <Input type="text" placeholder="请输入..." v-model="myData.infosource" style="width: 200px"/>
                    </FormItem>

                    <FormItem label="状态" prop="status">
                        <RadioGroup v-model="myData.status">
                            <Radio label="0">无效</Radio>
                            <Radio label="1">有效</Radio>
                        </RadioGroup>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="发布" prop="releaseTime">
                        <DatePicker type="date" v-model="myData.releaseTime" placeholder="选择日期"
                                    style="width: 200px"></DatePicker>
                    </FormItem>
                    <FormItem label="大图:" prop="info_infoLogo">
                        <up-load-file :imgUrl="myData.infoLogo" :imgLength="1" @getImgUrl="getImgUrl"></up-load-file>
                    </FormItem>
                    </Col>
                </Row>

                <FormItem label="简介:">
                    <Input style="width: 800px" v-model="myData.infoDescribe" type="textarea"
                           :autosize="{minRows: 5,maxRows: 5}" placeholder="请输入..."></Input>
                </FormItem>
                <FormItem label="内容:">
                    <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('myData')">提交</Button>

                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
    import upLoadFile from '../../components/upLoadFile.vue'
    import address from '../../components/address.vue'
    import API from '../../config/api'
    import qs from 'qs'
    import {formatDateTime, checkTel} from '../../config/utils'

    import UE from '../../components/ue/ue.vue';

    export default {
        props: ['editStatus', 'editData', 'title'],
        components: {
            'up-load-file': upLoadFile, UE
        },
        data() {
            return {
                dealerstop: 1,
                ruleValidate: {
                    infoTitle: [
                        {required: true, message: '车行名称不能为空', trigger: 'blur'}
                    ]
                },
                visible: false,
                defaultMsg: '',
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 350,
//                    serverUrl:  "http://172.17.100.32:20100/manager-api/ue/controller"
                    serverUrl: process.env.BASE_URL + process.env.API_MANAGER + "/ue/controller"

                }
            }
        },
        methods: {
            saveContentInfo() {
                let vm = this;
                vm.editData.infoContent = this.$refs.ue.getUEContent();
                console.log(vm.editData);
                let releaseTime=formatDateTime(vm.editData.releaseTime);
                vm.editData.releaseTime="";
                this.axios.post(API.POST_INFORMATION_SAVE+"?releaseTime="+releaseTime, this.myData).then(response => {

                    if (response.data.code == 1) {
                        this.close();
                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            getImgUrl(imgUrl) {
                this.myData.infoLogo = imgUrl;
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.saveContentInfo();
                    } else {
                        this.$Message.error('请完善信息!');
                    }
                })
            },
            close() {
                this.defaultMsg = "";
                this.$emit('closeModal')
            },
        },
        computed: {
            myData() {
                let vm = this;
                if (vm.editData.infoId) {
                    vm.editData.releaseTime = formatDateTime(vm.editData.releaseTime);
                    vm.defaultMsg = vm.editData.infoContent;
                }
                return this.editData;
            }
        },
        created() {
            this.defaultMsg = "";
        }
    }
</script>
<style lang='scss' scoped>
    .m-edit-modal {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

            span {
                float: right;
                padding: 0 20px;
                cursor: pointer;
            }

        }
        .m-content {
            margin-top: 20px;
            padding-bottom: 100px;
            overflow-y: auto;
        }

        .list-header {
            height: 45px;
            color: #333;
            line-height: 45px;
        }

        .list-row {
            padding-left: 100px;
            font-size: 14px;
            line-height: 40px;
        }

    }
</style>
